﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>基于知识图谱的《红楼梦》人物关系可视化及问答系统</title>

    <!--Bootstrap Stylesheet [ REQUIRED ]-->
    <link href="../static/css/bootstrap.min.css" rel="stylesheet">

    <link rel="shortcut icon" href="../static/images/logo.jpg">
    <!--Nifty Stylesheet [ REQUIRED ]-->
    <link href="../static/css/nifty.min.css" rel="stylesheet">


    <!--Nifty Premium Icon [ DEMONSTRATION ]-->
    <link href="../static/css/nifty-demo-icons.min.css" rel="stylesheet">


    <!--Demo [ DEMONSTRATION ]-->
    <link href="../static/css/nifty-demo-icons.min.css" rel="stylesheet">
    <link href="../static/css/nifty-demo.min.css" rel="stylesheet">
    <link href="../static/css/font-awesome.min.css" rel="stylesheet">

        
    
    <!--JAVASCRIPT-->
    <!--=================================================-->

    <!--Pace - Page Load Progress Par [OPTIONAL]-->
    <link href="../static/css/pace.min.css" rel="stylesheet">
   
    <script src="../static/js/pace.min.js"></script>
   


    <!--jQuery [ REQUIRED ]-->
    <script src="../static/js/jquery-2.2.4.min.js"></script>


    <!--BootstrapJS [ RECOMMENDED ]-->
    <script src="../static/js/bootstrap.min.js"></script>


    <!--NiftyJS [ RECOMMENDED ]-->
    <script src="../static/js/nifty.min.js"></script>
    <script src="../static/js/icons.js"></script>

    
    <script src="../static/js/echarts.min.js"></script>


    <!--=================================================-->
    
    <!--Demo script [ DEMONSTRATION ]-->
    <script src="../static/js/nifty-demo.min.js"></script>
       

</head>

<body>

    <div id="container" class="effect aside-float aside-bright mainnav-sm">
        
        <!--NAVBAR-->
        <!--===================================================-->
        <header id="navbar">
            <div id="navbar-container" class="boxed">

                <!--Brand logo & name-->
                <!--================================-->
                <div class="navbar-header">
                    <a href="{{ url_for('index') }}" class="navbar-brand">
                        <img src="../static/images/logo.jpg" alt="Nifty Logo" class="brand-icon">
                        <div class="brand-title">
                            <span class="brand-text">林智敏毕设</span>
                        </div>
                    </a>
                </div>
                <!--================================-->
                <!--End brand logo & name-->


                <!--Navbar Dropdown-->
                <!--================================-->
                <div class="navbar-content clearfix">
                    <ul class="nav navbar-top-links pull-left">

                        <!--Navigation toogle button-->
                        <!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
                        <li class="tgl-menu-btn">
                            <a class="mainnav-toggle" href="#">
                                <i class="demo-pli-view-list"></i>
                            </a>
                        </li>
                        
                    
                    <ul class="nav navbar-top-links pull-left">
                        <h4>基于知识图谱的《红楼梦》人物关系可视化及问答系统</h4>
                       



                    

                        
                    </ul>
                </div>
                <!--================================-->
                <!--End Navbar Dropdown-->

            </div>
        </header>
        <!--===================================================-->
        <!--END NAVBAR-->

        <div class="boxed">

            <!--CONTENT CONTAINER-->
            <!--===================================================-->
            <div id="content-container">

                <!--Page content-->
                <!--===================================================-->
                <div id="page-content">
                    
				            <div class="row" style="height: 800px;" id="guanxi">
                
                    <script type="text/javascript">
                        window.onresize = function () {

                            myChart.resize();
                        }
                        $.ajaxSetup({ async: false });
                        var myChart = echarts.init(document.getElementById("guanxi"));
                        myChart.showLoading();
                        var rela = { "data": [], "links": [] };
                        $.getJSON('../static/data.json', function (json) {
                            rela = json;

                        });
                        myChart.hideLoading();
                        option = {
                            // backgroundColor: "white",
                            title: {
                                text: '红楼梦人物关系图',
                                textStyle: {
                                    // color: "white",
                                    fontWeight: "lighter",
                                }
                            },
                            animationDurationUpdate: 1500,
                            animationEasingUpdate: 'quinticInOut',
                            legend: {
                                x: "center",
                                show: true,
                                data: ["贾家荣国府", "贾家宁国府", "王家", "史家", "薛家", "其他", "林家"]
                            },
                            series: [
                                {
                                    type: 'graph',
                                    layout: 'force',
                                    symbolSize: 45,
                                    edgeSymbol: ['circle', 'arrow'],
                                    edgeSymbolSize: [4, 4],
                                    edgeLabel: {
                                        normal: {
                                            show: true,
                                            textStyle: {
                                                fontSize: 10
                                            },
                                            formatter: "{c}"
                                        }
                                    },
                                    force: {
                                        repulsion: 2500,
                                        edgeLength: [10, 100]
                                    },
                                    focusNodeAdjacency: true,
                                    draggable: true,
                                    roam: true,
                                    categories: [{
                                        name: '贾家荣国府',
                                        // itemStyle: {
                                        //     normal: {
                                        //         color: "#009800",
                                        //     }
                                        // }
                                    }, {
                                        name: '贾家宁国府',
                                        // itemStyle: {
                                        //     normal: {
                                        //         color: "#4592FF",
                                        //     }
                                        // }
                                    }, {
                                        name: '王家',
                                        // itemStyle: {
                                        //     normal: {
                                        //         color: "#3592F",
                                        //     }
                                        // }
                                    },
                                    {
                                        name: '史家',
                                    }, {
                                        name: '薛家',
                                    }, {
                                        name: '其他',
                                    },
                                    {
                                        name: '林家',
                                    }
                                    ],
                                    label: {
                                        normal: {
                                            show: true,
                                            textStyle: {
                                                fontSize: 12
                                            },
                                        }
                                    },
                                    force: {
                                        repulsion: 1000
                                    },
                                    tooltip: {
                                        formatter: function (node) { // 区分连线和节点，节点上额外显示其他数字
                                            if (!node.value) {
                                                return node.data.name;
                                            } else {
                                                return node.data.name + ":" + node.data.showNum;
                                            }
                                        },
                                    },
                                    lineStyle: {
                                        normal: {
                                            opacity: 0.9,
                                            width: 1,
                                            curveness: 0.3
                                        }
                                    },
                                    // progressiveThreshold: 700,
                                    nodes: rela.data.map(function (node, idx) {
                                        node.id = idx;
                                        return node;
                                    }),
                                    links: rela.links,



                                }
                            ]
                        };
                        myChart.setOption(option, true);
                    </script>
                
                </div>
                    
            
					
					
					
                </div>
                <!--===================================================-->
                <!--End page content-->


            </div>
            <!--===================================================-->
            <!--END CONTENT CONTAINER-->

            
            <!--MAIN NAVIGATION-->
            <!--===================================================-->
            <nav id="mainnav-container">
                <div id="mainnav">

                    <!--Menu-->
                    <!--================================-->
                    <div id="mainnav-menu-wrap">
                        <div class="nano">
                            <div class="nano-content">

                                <ul id="mainnav-menu" class="list-group">
						
						            
                                  
                                    <!--Category name-->
						            <li class="list-header"> 人物关系可视化</li>
                        
                                    <!--Menu list item-->
                                    
                        
                                    <!--Menu list item-->
                                   <li>
                                        <a href="{{ url_for('search') }}">
                                            <i class="fa fa-search" style="width:24px"></i>
                                            <span class="menu-title">
                                                <strong>检索人物关系</strong>
                                            </span>
                                            
                                        </a>
                        
                                        
                                    </li>
                                    <li>
                                        <a href="{{ url_for('get_all_relation') }}">
                                            <i class="fa fa-pie-chart" style="width:24px"></i>
                                            <span class="menu-title">
                                                <strong>红楼梦人物关系全貌</strong>
                                            </span>
                                            
                                        </a>
                        
                                    </li>
                                    <!--Menu list item-->
                                   
						          
                                   
						            <li class="list-divider"></li>
						
						            <!--Category name-->
						            <li class="list-header">问答系统</li>
						
						            <!--Menu list item-->
						            <li >
						                <a href="{{ url_for('KGQA') }}">
						                    <i class="fa fa-question-circle" style="width:24px"></i>
						                    <span class="menu-title">人物关系问答</span>
											
						                </a>
						
						                
						            </li>
						
						                                    </ul>


                                
                            </div>
                        </div>
                    </div>
                    <!--================================-->
                    <!--End menu-->

                </div>
            </nav>
            <!--===================================================-->
            <!--END MAIN NAVIGATION-->

        </div>
        <!-- FOOTER -->
        <!--===================================================-->
        <footer id="footer">

           <p class="pad-lft">Copyright&#0169; 2018 林智敏  &nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;All Rights Reserved </p>

        </footer>
        <!--===================================================-->
        <!-- END FOOTER -->

        <!-- SCROLL PAGE BUTTON -->
        <!--===================================================-->
        <button class="scroll-top btn">
            <i class="pci-chevron chevron-up"></i>
        </button>
        <!--===================================================-->
    </div>
    <!--===================================================-->
    <!-- END OF CONTAINER -->
   
</body>
</html>
